<template>
  <div class="test-chart">
    <div id="chart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chart: null,
      legendData: [],
      legendSelected: {},
      clearData: [],
    };
  },
  mounted() {
    this.clearData = [
      {
        name: '日用品',
        show: true,
        data: [
          [10, 12, 3,],
          [12, 14, 15,],
          [14, 16, 12,],
          [16, 18, 22,],
          [18, 20, 7,],
          [20, 22, 17,]
        ]
      },
      {
        name: '生鲜',
        show: true,
        data: [
          [10, 12, 7,],
          [12, 14, 47,],
          [14, 16, 64,],
          [16, 18, 87,],
          [18, 20, 3,],
          [20, 22, 17,]
        ]
      },
      {
        name: '调料',
        show: true,
        data: [
          [10, 12, 44,],
          [12, 14, 25,],
          [14, 16, 6,],
          [16, 18, 76,],
          [18, 20, 23,],
          [20, 22, 10,]
        ]
      },
      {
        name: '零食',
        show: true,
        data: [
          [10, 12, 56,],
          [12, 14, 67,],
          [14, 16, 6,],
          [16, 18, 29,],
          [18, 20, 18,],
          [20, 22, 35,]
        ]
      },
      {
        name: '饮料',
        show: true,
        data: [
          [10, 12, 33,],
          [12, 14, 36,],
          [14, 16, 25,],
          [16, 18, 17,],
          [18, 20, 23,],
          [20, 22, 7,]
        ]
      },
    ]
    // this.clearData = [this.clearData[0]]
    this.legendData = this.clearData.map(item => item.name)
    this.legendSelected = this.legendData.reduce((r, i) => ({...r, [i]: true}), {})
    this.refresh()
  },
  methods: {
    onLegendChange(params) {
      this.legendSelected = params.selected
      this.clearData.forEach(item => item.show = this.legendSelected[item.name])
      this.refresh()
    },
    refresh() {
      let chartDom = document.getElementById('chart');
      this.chart = this.$echarts.init(chartDom);
      let clearData = JSON.parse(JSON.stringify(this.clearData))
      let single = clearData.length === 1
      let totals = clearData.reduce((r, item, index) => {
        if (!item.show) return r
        if (!r.length) {
          r = item.data.map(j => j[2])
        } else {
          r = r.map((i1, i2) => i1 + item.data[i2][2])
        }
        return r
      }, [])
      clearData.forEach(item => {
        item.data.forEach((i, index) => {
          i.push(totals[index])
          i.push(`[${i[0]},${i[1]})`)
          i.push(item.name)
        })
      })
      let lastHeight = []
      let series = clearData.map(item => {
        let res = {
          type: 'custom',
          renderItem(params, api) {
            let style = api.style();
            let yValue = api.value(3);
            let selfY = api.value(2);
            let start = api.coord([api.value(0), yValue]);
            let size = api.size([api.value(1) - api.value(0), yValue]);
            let x = start[0], y = start[1], width = size[0], height = selfY / yValue * size[1]
            y = lastHeight[params.dataIndex] || y
            lastHeight[params.dataIndex] = y + height
            return {
              type: 'rect',
              shape: {x, y, width, height,},
              style: style
            };
          },
          dimensions: ['大于等于', '小于', '频次', '总量', '数量', '系列',],
          encode: {
            x: [0, 1],
            y: 3,
            tooltip: [4, 2],
            itemName: 5,
          },
          data: item.data,
        }
        if (!single) res.name = item.name
        return res
      })
      let legend = {
        data: this.legendData,
        selected: this.legendSelected,
        show: true,
        top: 0,
        left: 'center',
      }
      let option = {
        legend: single ? {show: false} : legend,
        tooltip: {},
        xAxis: {scale: true},
        yAxis: {},
        series,
      };
      this.chart.off('legendselectchanged', this.onLegendChange)
      this.chart.on('legendselectchanged', this.onLegendChange)
      this.chart.setOption(option, true);
    }
  },
};
</script>
<style lang="scss">
.test-chart {
  #chart {
    width: 1000px;
    height: 800px;
    margin: 20px auto;
  }
}
</style>